<template>
    <div class="common-layout">
        <el-container>
            <el-aside width="200px">
                <el-card>
                    <el-input v-model="filterText" class="w-60 mb-2" placeholder="Filter keyword" />
                    <el-tree ref="treeRef" style="max-width: 600px;height: 610px;" class="filter-tree"
                        :data="Insttreedata" :props="defaultProps" default-expand-all
                        :filter-node-method="filterNode" />
                </el-card>
            </el-aside>
            <el-container>
                <el-header>
                    <el-card>
                        <el-form :inline="true" :model="dater" class="demo-form-inline">
                            <el-form-item label="机构名称">
                                <el-input v-model="dater.InstitutionName" clearable style="width: 150px;" />
                            </el-form-item>
                            <el-button type="primary" @click="instdatalist">查询</el-button>
                            <el-button @click="resset">添加</el-button>
                        </el-form>
                    </el-card>
                </el-header>
                <el-main style="margin-top: 30px;">
                    <el-card>
                        <el-tabs class="demo-tabs">
                            <el-tab-pane label="上转机构" name="first">
                                <el-table :data="instdata" style="width: 100%">
                                    <el-table-column prop="institutionName" label="机构名称"  />
                                    <el-table-column prop="institutionType" label="机构类型" />
                                    <el-table-column prop="institutionURL" label="机构URL" />
                                     <el-table-column  label="操作" >
                                        <template v-slot="scoped">
                                                <el-button link type="primary" size="small">删除</el-button>
                                        </template>
                                     </el-table-column>
                                </el-table>
                                <el-pagination v-model:current-page="pages.pagindex" v-model:page-size="pages.pagesize"
                                :page-sizes="[5, 7, 9]" :background="true"
                                layout="total, sizes, prev, pager, next, jumper" :total="pages.totalcount" />
                            </el-tab-pane>
                            <el-tab-pane label="下转机构" name="second">下转机构</el-tab-pane>
                        </el-tabs>

                    </el-card>
                </el-main>
            </el-container>
        </el-container>
    </div>

</template>

<script lang="ts" setup>
import { onMounted, reactive, ref, watch } from 'vue'
import { ElMessage, ElMessageBox, type FilterNodeMethodFunction, type TreeInstance } from 'element-plus'
import axios from 'axios'
import { useCounterStore } from '@/stores/counter'

const store = useCounterStore()

//机构
const instdata=ref([ {
        "institutionId": 0,
        "institutionName": "",
        "institutionType": "",
        "institutionURL": "",
        "superiorInstitution": 0,
        "isDelete": false
      },])
//分页
const pages=reactive({
pagindex:1,
pagesize:3,
totalcount:0,
totalpage:1,
})
//参数
const dater=reactive({
    InstitutionName:"",
})
const instdatalist=()=>{
    axios.get("http://localhost:5108/api/Manager/InstitutionShow",{params:{
        InstitutionName:dater.InstitutionName,
        pagindex:pages.pagesize,
        pagesize:pages.pagesize
    }}).then(res=>{
        instdata.value=res.data.data.data
        pages.totalcount=res.data.data.totalCount
        pages.totalpage=res.data.data.totalPage
    })
}


interface Tree {
    [key: string]: any
}

const filterText = ref('')
const treeRef = ref<TreeInstance>()

const defaultProps = {
    children: 'children',
    label: 'label',
}

watch(filterText, (val) => {
    treeRef.value!.filter(val)
})

const filterNode: FilterNodeMethodFunction = (value: string, data: Tree) => {
    if (!value) return true
    return data.label.includes(value)
}
const Insttreedata = ref([])
//树形方法
const Insttreelist = () => {
    axios.get("http://localhost:5108/api/Manager/InstitutionTree").then(res => {
        Insttreedata.value = res.data.data
        console.log(Insttreedata.value)

    })
}

//团队列表

//查询参数
const formset = reactive({
    TeamName: "",
    TeamStatus: ""
})
//重置
const resset = () => {
    formset.TeamName = ""
    formset.TeamStatus = ""
   
}
//分页参数
const page = reactive({
    Pagindex: 1,
    Pagsize: 3,
    totalcount: 0,
    totalpage: 1
})

const teamdata = ref([])


watch(pages,()=>{
    instdatalist();
})


//钩子函数
onMounted(() => {
    Insttreelist();
 
    instdatalist();
})

//团队添加逻辑
const teamSettinig = reactive({
    isOpen: false,
    title: "",
    isbool: false
})

const Teamadddata = reactive({
    "teamId": 0,
    "teamName": "",
    "parentTeam": "",
    "charge": store.current.userName,
    "teamTags": [],
    "teamStatus": true,
    "phone": "",
    "teamProfile": "",
    "isDelete": true
})


</script>


<style scoped>
.tag-container {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.tag-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: #fff;
    border: 1px solid #f56c6c;
    color: #f56c6c;
    font-size: 14px;
    font-weight: bold;
    cursor: default;
}
</style>
